---
title: NativeSelect
description: "`NativeSelect`は、ユーザーがオプションのリストから1つの値を選択するために使用されるコンポーネントです。ブラウザ（ユーザーエージェント）によって提供されるネイティブなドロップダウンリストを表示します。"
storybook: components-nativeselect--basic
source: components/native-select
style: components/native-select/native-select.style.ts
---

```tsx preview
<NativeSelect.Root placeholder="Select a character">
  <NativeSelect.Option value="日比野カフカ">日比野カフカ</NativeSelect.Option>
  <NativeSelect.Option value="市川レノ">市川レノ</NativeSelect.Option>
  <NativeSelect.Option value="亜白ミナ">亜白ミナ</NativeSelect.Option>
  <NativeSelect.Option value="四ノ宮キコル">四ノ宮キコル</NativeSelect.Option>
</NativeSelect.Root>
```

## 使い方

:::note
`NativeSelect`は、ブラウザ（ユーザーエージェント）によって提供されるネイティブなUIコンポーネントです。これは、ブラウザがデフォルトで持っている機能を利用して、ドロップダウンリストを表示します。機能を拡張し、よりスタイリングされたコンポーネントを使いたい場合は、[Select](/components/forms/select)をご覧ください。
:::

:::code-group

```tsx [package]
import { NativeSelect } from "@yamada-ui/react"
```

```tsx [alias]
import { NativeSelect } from "@/components/ui"
```

```tsx [monorepo]
import { NativeSelect } from "@workspaces/ui"
```

:::

```tsx
<NativeSelect.Root>
  <NativeSelect.Group>
    <NativeSelect.Option />
  </NativeSelect.Group>
  <NativeSelect.Option />
</NativeSelect.Root>
```

### itemsを使う

```tsx preview functional
const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

return <NativeSelect.Root items={items} placeholder="Select a character" />
```

### バリアントを変更する

```tsx preview functional
const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

return (
  <VStack>
    <For each={["outline", "filled", "flushed"]}>
      {(variant) => (
        <NativeSelect.Root
          key={variant}
          variant={variant}
          placeholder={toTitleCase(variant)}
          items={items}
        />
      )}
    </For>
  </VStack>
)
```

### サイズを変更する

```tsx preview functional
const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

return (
  <VStack>
    <For each={["sm", "md", "lg"]}>
      {(size) => (
        <NativeSelect.Root
          key={size}
          size={size}
          placeholder={`Size (${size})`}
          items={items}
        />
      )}
    </For>
  </VStack>
)
```

### デフォルトの値を設定する

デフォルトの値を設定する場合は、`defaultValue`に値を設定します。

```tsx preview functional
const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

return (
  <NativeSelect.Root
    defaultValue="日比野カフカ"
    items={items}
    placeholder="Select a character"
  />
)
```

### グループ化する

オプションをグループ化する場合は、`NativeSelectGroup`を使用します。

```tsx preview
<NativeSelect.Root placeholder="Select a character">
  <NativeSelect.Group label="第1部隊">
    <NativeSelect.Option value="鳴海弦">鳴海弦</NativeSelect.Option>
    <NativeSelect.Option value="長谷川エイジ">長谷川エイジ</NativeSelect.Option>
  </NativeSelect.Group>

  <NativeSelect.Group label="第3部隊">
    <NativeSelect.Option value="日比野カフカ">日比野カフカ</NativeSelect.Option>
    <NativeSelect.Option value="市川レノ">市川レノ</NativeSelect.Option>
    <NativeSelect.Option value="亜白ミナ">亜白ミナ</NativeSelect.Option>
    <NativeSelect.Option value="四ノ宮キコル">四ノ宮キコル</NativeSelect.Option>
  </NativeSelect.Group>
</NativeSelect.Root>
```

```tsx preview functional
const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "怪獣8号", value: "怪獣8号" },
    {
      label: "第1部隊",
      items: [
        { label: "鳴海弦", value: "鳴海弦" },
        { label: "長谷川エイジ", value: "長谷川エイジ" },
      ],
    },
    {
      label: "第3部隊",
      items: [
        { label: "日比野カフカ", value: "日比野カフカ" },
        { label: "市川レノ", value: "市川レノ" },
        { label: "亜白ミナ", value: "亜白ミナ" },
        { label: "四ノ宮キコル", value: "四ノ宮キコル" },
      ],
    },
  ],
  [],
)

return <NativeSelect.Root items={items} placeholder="Select a character" />
```

### プレースホルダーをオプションに含めない

デフォルトでは、オプションにプレースホルダーが含まれています。プレースホルダーをオプションに含めない場合は、`includePlaceholder`を`false`に設定します。

```tsx preview functional
const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

return (
  <NativeSelect.Root
    includePlaceholder={false}
    items={items}
    placeholder="Select a character"
  />
)
```

### オプションを無効にする

オプションを無効にする場合は、`NativeSelect.Option`の`disabled`を`true`に設定します。

```tsx preview
<NativeSelect.Root placeholder="Select a character">
  <NativeSelect.Option value="日比野カフカ">日比野カフカ</NativeSelect.Option>
  <NativeSelect.Option disabled value="市川レノ">
    市川レノ
  </NativeSelect.Option>
  <NativeSelect.Option value="亜白ミナ">亜白ミナ</NativeSelect.Option>
  <NativeSelect.Option value="四ノ宮キコル">四ノ宮キコル</NativeSelect.Option>
</NativeSelect.Root>
```

```tsx preview functional
const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { disabled: true, label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

return <NativeSelect.Root items={items} placeholder="Select a character" />
```

### 無効にする

無効にする場合は、`disabled`を`true`に設定します。

```tsx preview functional
const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

return (
  <VStack>
    <For each={["outline", "filled", "flushed"]}>
      {(variant) => (
        <NativeSelect.Root
          key={variant}
          disabled
          variant={variant}
          items={items}
          placeholder={toTitleCase(variant)}
        />
      )}
    </For>
  </VStack>
)
```

### 読み取り専用にする

読み取り専用にする場合は、`readOnly`を`true`に設定します。

```tsx preview functional
const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

return (
  <VStack>
    <For each={["outline", "filled", "flushed"]}>
      {(variant) => (
        <NativeSelect.Root
          key={variant}
          readOnly
          variant={variant}
          items={items}
          placeholder={toTitleCase(variant)}
        />
      )}
    </For>
  </VStack>
)
```

### 無効な入力にする

無効な入力にする場合は、`invalid`を`true`に設定します。

```tsx preview functional
const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

return (
  <VStack>
    <For each={["outline", "filled", "flushed"]}>
      {(variant) => (
        <NativeSelect.Root
          key={variant}
          invalid
          variant={variant}
          items={items}
          placeholder={toTitleCase(variant)}
        />
      )}
    </For>
  </VStack>
)
```

### ボーダーの色を変更する

ボーダーの色を変更する場合は、`focusBorderColor`または`errorBorderColor`に値を設定します。

```tsx preview functional
const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

return (
  <VStack>
    <NativeSelect.Root
      focusBorderColor="green.500"
      placeholder="Custom focus border color"
      items={items}
    />
    <NativeSelect.Root
      errorBorderColor="orange.500"
      invalid
      placeholder="Custom invalid border color"
      items={items}
    />
  </VStack>
)
```

### アイコンをカスタマイズする

```tsx preview functional
const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

return (
  <NativeSelect.Root
    items={items}
    placeholder="Select a character"
    icon={<ChevronsDownIcon />}
  />
)
```

### 制御する

```tsx preview functional client
const [value, setValue] = useState<string>("日比野カフカ")
const items = useMemo<NativeSelect.Item[]>(
  () => [
    { label: "日比野カフカ", value: "日比野カフカ" },
    { label: "市川レノ", value: "市川レノ" },
    { label: "亜白ミナ", value: "亜白ミナ" },
    { label: "四ノ宮キコル", value: "四ノ宮キコル" },
  ],
  [],
)

return (
  <NativeSelect.Root
    items={items}
    placeholder="Select a character"
    value={value}
    onChange={(e) => setValue(e.target.value)}
  />
)
```

## Props

<PropsTable name="native-select" />

## アクセシビリティ

現在、v2の移行に伴い、このセクションは更新中です。
